<template>
  <div class="process-box flex mar-t-25">
    <div class="flex submit-status">
      <span class="round" />
      <span class="process" />
      <div v-if="cartStep" class="active-process-box flex">
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">购物车</span>
    </div>
    <div class="flex pay-status">
      <span class="left-process" />
      <span class="round" />
      <span class="right-process" />
      <div v-if="buyStep" class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">确认订单</span>
    </div>
    <div class="distribution-status flex">
      <span class="left-process" />
      <span class="round" />
      <span class="right-process" />
      <div v-if="payStep" class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">支付订单</span>
    </div>
    <div class="ship-status">
      <span class="left-process" />
      <span class="round" />
      <div v-if="successStep" class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
      </div>
      <span class="time font-14 font-color-6">完成</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  props: {
    step: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const cartStep = ref(<boolean>true)
    const buyStep = ref(<boolean>false)
    const payStep = ref(<boolean>false)
    const successStep = ref(<boolean>false)
    onMounted(() => {
      if(props.step === '1'){
        // 购物车
        cartStep.value = true
        buyStep.value = false
        payStep.value = false
        successStep.value = false
      } else if(props.step === '2'){
        // 确认订单
        cartStep.value = true
        buyStep.value = true
        payStep.value = false
        successStep.value = false
      } else if(props.step === '3'){
        // 支付订单
        cartStep.value = true
        buyStep.value = true
        payStep.value = true
        successStep.value = false
      }
    })

    return {
      cartStep,
      buyStep,
      payStep,
      successStep
    }
  }
})
</script>

<style lang="scss" scoped>
$roundWidth: 28px;
$processWidth: 112px;
$timespace: 113px;
.process-box {
  position: relative;
  // margin-right: -102px;
  .status-text {
    position: absolute;
    top: -20px;
  }
  .round {
    width: $roundWidth;
    height: $roundWidth;
    background: #efefef;
    border-radius: 50%;
  }
  .in-round {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #182245;
  }
  .process,.left-process,.right-process {
    width: $processWidth;
    height: 10px;
    background: #efefef;
    position: absolute;
    top: 9px;
  }
  .in-process, .left-in-process, .right-in-process {
    width: $processWidth + 4;
    height: 4px;
    background: #182245;
    position: absolute;
    top: 8px;
  }
  .time{
    width: 70px;
    text-align: center;
    color: #333333;
  }
  .active-process-box {
    position: absolute;
    top: 4px;
    .left-in-process {
      left: -($processWidth + 4);
    }
    .right-in-process {
      left: 20px;
    }
  }
  .submit-status {
    .status-text {
      left: -10px;
    }
    .process {
      left: $roundWidth;
    }
    .active-process-box {
      left: 4px;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: -21px;
    }
  }
  .pay-status {
    .status-text {
      left: $roundWidth + $processWidth * 2 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth + $processWidth * 2;
    }
    .left-process {
      left: 140px;
    }
    .right-process {
      left: $roundWidth * 2 + $processWidth * 2;
    }
    .active-process-box {
      left: $roundWidth + $processWidth * 2 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 232px;
    }
  }
  .distribution-status {
    .status-text {
      left: $roundWidth * 2 + $processWidth * 4 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth * 2 + $processWidth * 4;
    }
    .left-process {
      left: 392px;
    }
    .right-process {
      left:  $roundWidth * 3 + $processWidth * 4;
    }
    .active-process-box {
      left: $roundWidth * 2 + $processWidth * 4 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 483px;
    }
  }
  .ship-status {
    .status-text {
      left: $roundWidth * 3 + $processWidth * 6 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth * 3 + $processWidth * 6;
    }
    .left-process {
      left: $roundWidth * 3 + $processWidth * 5;
    }
    .right-process {
      left: $roundWidth * 4 + $processWidth * 6;
    }
    .active-process-box {
      left: $roundWidth * 3 + $processWidth * 6 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 735px;
    }
  }
  .finish-status {
    .status-text {
      left: $roundWidth * 4 + $processWidth * 8 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth * 4 + $processWidth * 8
    }
    .left-process {
      left: $roundWidth * 4 + $processWidth * 7;
    }
    .active-process-box {
      left: $roundWidth * 4 + $processWidth * 8 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 944px;
    }
  }
}
</style>

